<template>
  <base-window
    :top="top"
    :unique="unique"
    :title="$t('task.edit.qualityApprove')"
    size="small"
    :show.sync="visible"
    width="432px"
    class="task-need-approve-dialog"
  >
    <div class="base-modal-content">
      <div class="form-design-warning quality-waring">
        <i class="iconfont icon-warning-circle-fill"></i>
        {{ $t('task.tip.qualityTip2') }}
      </div>
      <p><span class="form-item-required" v-if="remarkRequired">*</span>{{ $t('task.detail.components.approveDesc') }}：</p>
      <textarea
        v-model="apprForm.applyRemark"
        :placeholder="remarkPlaceholder"
        rows="3"
        maxlength="500"
      />
      <!--S 审批步骤 -->
      <div class="approve-steps">
        <el-row v-if="approveLevel === 1" :type="chooseApprover ? '' : 'flex'">
          <p>{{ $t('common.base.approveUser') }}：</p>
          <form-user
            v-if="chooseApprover"
            :field="{ displayName: $t('common.base.approveUser') }"
            v-model="approves"
            :see-all-org="true"
            :placeholder="$t('task.tip.approveTip6')"
          />
          <template v-else>{{ getApproverNames(qualityInfo) }}</template>
        </el-row>
        <el-steps v-else direction="vertical">
          <!-- 一级审批步骤 -->
          <el-step :title="$t('common.base.approveLevel', { data1: $t('common.base.number1') })" status="process">
            <el-row slot="description" type="flex">
              <div class="form-item-control">
                <form-user
                  v-if="chooseApprover"
                  :field="{ displayName: $t('common.base.approveLevelUser', { data1: $t('common.base.number1') }) }"
                  v-model="approves"
                  :see-all-org="true"
                  :placeholder="$t('task.tip.approveTip7', { data: $t('common.base.number1') })"
                />
                <div v-else>
                  <label>{{ $t('common.base.approveUser') }}：</label>
                  {{ getApproverNames(qualityInfo) }}
                </div>
              </div>
            </el-row>
          </el-step>
          <!-- 二级以上审批步骤 -->
          <el-step
            v-for="(item, idx) in multiApproveSetting"
            :key="idx"
            :title="$t('common.base.approveLevel', { data1: cnNumName[idx + 2] })"
            status="process"
          >
            <el-row slot="description" type="flex">
              <div class="form-item-control">
                <form-user
                  v-if="item.isOpt === 1"
                  :field="{ displayName: $t('common.base.approveLevelUser', { data1: cnNumName[idx + 2] }) }"
                  :value="item.approves"
                  @input="(val) => updateApprover(val, idx)"
                  :see-all-org="true"
                  :placeholder="$t('task.tip.approveTip7', { data: cnNumName[idx + 2] })"
                />
                <div v-else>
                  <label>{{ $t('common.base.approveUser') }}：</label>
                  {{ getApproverNames(item) }}
                </div>
              </div>
            </el-row>
          </el-step>
        </el-steps>
      </div>
      <!--E 审批步骤 -->
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('common.base.cancel') }}</el-button>
      <el-button type="primary" @click="submit" :disabled="pending">{{ $t('common.base.submit') }}</el-button>
    </div>
  </base-window>
</template>

<script>
import FormUser from '@src/component/form/components/FormUser/FormUser.vue';

export default {
  name: 'ProposeApproveDialog',
  props: {
    approveId: {
      type: String,
      default: '',
    },
    remarkRequired: {
      type: Boolean,
      default: true
    },
    top: {
      type: Boolean,
      default: false
    },
    unique: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false,
      pending: false,
      chooseApprover: false,
      apprForm: {},
      approves: {},
      approversName: '',
      approveLevel: 1, // 审批等级
      multiApproveSetting: [], // 多级审批（2级以上审批）
      successBc: null,
      // 质保规则给了一个默认值，不然刚进来会报错
      qualityInfo: {
        multiApproveSetting: [
          {
            state: '',
            leader: '',
            approves: [],
            level: 0,
            taskTemplateId: ''
          }
        ],
        state: '',
        leader: '',
        approves: [],
        level: 0,
        taskTemplateId: ''
      }
    }
  },
  computed: {
    remarkPlaceholder() {
      return this.remarkRequired ? this.$t('task.tip.proposeApproveTip2') : this.$t('task.tip.proposeApproveTip3')
    },
    cnNumName() {
      return [this.$t('common.base.number0'), this.$t('common.base.number1'), this.$t('common.base.number2'), this.$t('common.base.number3'), this.$t('common.base.number4'), this.$t('common.base.number5'), this.$t('common.base.number6'), this.$t('common.base.number7'), this.$t('common.base.number8'), this.$t('common.base.number9')];
    }
  },
  methods: {
    /**
     * 更新多级选择的审批人
     */
    updateApprover(data, idx) {
      console.log(data, idx);
      this.$set(this.multiApproveSetting, idx, {
        ...this.multiApproveSetting[idx],
        approves: data
      })
    },
    needSelectApprover(leader) {
      return leader === 'promoter';
    },
    getApproverNames({ leader, approves, displayName }) {
      let approverNames = approves.map(item => item.displayName).join(',');
      if (leader == 'leader') approverNames = this.$t('task.edit.proposerTeamLeader');
      if (leader == 'userAdmin') approverNames = this.$t('common.form.preview.qualityField.label11');

      // 判断是否表单人员审批
      if (!approverNames && leader && leader.indexOf('formUser') > -1) {
        let field = this.fields.find(field => `formUser_${field.id}` === leader)
        if (field && field.fieldName) {
          // 表单人员多选情况
          if (Array.isArray(this.attributes[field.fieldName])) {
            approverNames = this.attributes[field.fieldName].map(item => item.displayName).join(',');
          } else { // 表单人员单选情况
            approverNames = this.attributes[field.fieldName] && this.attributes[field.fieldName].displayName;
          }
        }
      }

      if (leader == 'users' && !approverNames) {
        displayName = this.$t('common.form.preview.qualityField.label9');
      }

      displayName = displayName || this.$t('task.edit.approvers');
      return approverNames || this.$t('task.tip.approveTip8', { name: displayName });
    },
    openDialog(data) {
      this.qualityInfo = data.approveRule
      // 重置
      this.approves = {};
      this.apprForm = {};
      this.apprForm.applyRemark = '';
      this.approveLevel = this.qualityInfo.level || 1;
      this.multiApproveSetting = this.qualityInfo.multiApproveSetting ? [...this.qualityInfo.multiApproveSetting] : [];
      this.visible = true;
    },
    submit() {
      // 审批说明必填校验
      if (!this.apprForm.applyRemark && this.remarkRequired) return this.$platform.alert(this.$t('task.tip.approveTip9'));

      this.$emit('success', this.apprForm)
      this.visible = false;
      this.pending = true;
    },

  },
  components: {
    [FormUser.name]: FormUser
  }
}
</script>

<style lang="scss">
.task-need-approve-dialog {
  .form-item {
    margin-bottom: 10px;
    align-items: baseline;
  }

  // 以下为jsp页面兼容样式 
  .form-item-required {
    color: red;
  }

  .base-modal {
    .base-modal-body {
      padding: 20px;

      .base-modal-content {
        textarea {
          width: 100%;
        }

        p {
          margin-bottom: 8px;

          &.tips {
            color: #999;
            font-size: 12px;
          }

          &.base-upload-placeholder {
            margin-bottom: 0;
          }
        }

        button {
          height: 24px;
          line-height: 32px;
          width: 24px;

          padding: 0;
          margin: 0;
          outline: none;
          color: #666;
          border: none;
          background-color: transparent;
          transition: color ease .15s;

          i {
            font-size: 14px;
          }

          &:hover {
            color: #e84040;
          }
        }
      }

      .el-button {
        min-width: auto;
        max-width: auto;
      }
    }

    .base-modal-footer {
      text-align: right;
    }

    .task-back-dialog {
      p {
        font-size: 12px;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.approve-steps {
  margin-top: 20px;
}

// elemeny-ui 
::v-deep .el-step__description {
  padding: 0;
}

::v-deep .el-steps,
.el-step {
  width: auto !important;
}

::v-deep .el-step__head.is-process {
  color: #BFBFBF;
  border-color: #BFBFBF;
}

textarea {
  width: 100%;
}

.quality-waring {
  margin-bottom: 24px !important;
}
</style>